<template>
  <a-modal
    :title="formTile + '工艺库'"
    :visible="true"
    width="70%"
    :footer="null"
    @cancel="reset"
  >
    <div class="main">
      <a-steps :current="current">
        <a-step
          v-for="item in steps"
          :key="item"
          :title="item"
        />
      </a-steps>
      <div class="steps-content">
        <a-row
          type="flex"
          justify="start"
          align="top"
        >
          <a-col :span="24">
            <div v-show="current == 0">
              <a-card>
                <a-form
                  :form="form"
                  @submit="handleSubmit"
                  :labelCol="formItemLayout.labelCol"
                  :wrapperCol="formItemLayout.wrapperCol"
                >
                 <a-form-item label="模板名称">
                    <a-textarea
                      allow-clear
                      :rows="3"
                      placeholder="请输入内容"
                      v-decorator="[
                  `tempName`,
                  {
                    validateTrigger: ['change', 'blur'],
                   
                  }
                ]"
                    ></a-textarea>
                    <!-- rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入后道工序'
                      }
                    ] -->
                  </a-form-item>
                  <a-form-item label="后道工序">
                    <a-textarea
                      allow-clear
                      :rows="3"
                      placeholder="请输入内容"
                      v-decorator="[
                  `beof`,
                  {
                    validateTrigger: ['change', 'blur'],
                   
                  }
                ]"
                    ></a-textarea>
                    <!-- rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入后道工序'
                      }
                    ] -->
                  </a-form-item>
                  <a-form-item label="面料正反面说明">
                    <a-textarea
                      allow-clear
                      :rows="3"
                      placeholder="请输入内容"
                      v-decorator="[
                  `fabricDesc`,
                  {
                    validateTrigger: ['change', 'blur'],
                   
                  }
                ]"
                    ></a-textarea>
                    <!-- rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入面料正反面说明'
                      }
                    ] -->
                  </a-form-item>
                  <a-form-item label="纸样数量">
                    <a-textarea
                      allow-clear
                      :rows="3"
                      placeholder="请输入纸张数量"
                      v-decorator="[
                  `zyNum`,
                  {
                    validateTrigger: ['change', 'blur'],
                   
                  }
                ]"
                    ></a-textarea>
                    <!-- rules: [
                      {
                        required: true,
                        message: '请输入纸张数量'
                      }
                    ] -->
                  </a-form-item>
                  <a-form-item label="裁床注意">
                    <a-textarea
                      allow-clear
                      :rows="3"
                      placeholder="请输入内容"
                      v-decorator="[
                  `cutting`,
                  {
                    validateTrigger: ['change', 'blur'],
                  
                  }
                ]"
                    ></a-textarea>
                    <!-- rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入裁床注意'
                      }
                    ] -->
                  </a-form-item>
                  <a-form-item label="工序流程">
                    <a-textarea
                      allow-clear
                      :rows="3"
                      placeholder="请输入内容"
                      v-decorator="[
                  `process`,
                  {
                    validateTrigger: ['change', 'blur'],
                   
                  }
                ]"
                    ></a-textarea>
                    <!-- rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入工序流程'
                      }
                    ] -->
                  </a-form-item>

                  <a-form-item label="特艺-排料/剪裁要求">
                    <a-textarea
                      allow-clear
                      :rows="3"
                      placeholder="请输入内容"
                      v-decorator="[
                  `tyReq`,
                  {
                    validateTrigger: ['change', 'blur'],
                   
                  }
                ]"
                    ></a-textarea>
                    <!-- rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入特艺-排料/剪裁要求'
                      }
                    ] -->
                  </a-form-item>
                  <a-form-item label="特艺/特殊工序">
                    <a-textarea
                      allow-clear
                      :rows="3"
                      placeholder="请输入内容"
                      v-decorator="[
                  `tyProcess`,
                  {
                    validateTrigger: ['change', 'blur'],
                   
                  }
                ]"
                    ></a-textarea>
                  </a-form-item>
                  <a-form-item label="常规工艺要求">
                    <a-textarea
                      allow-clear
                      :rows="3"
                      placeholder="请输入内容"
                      v-decorator="[
                  `commonReq`,
                  {
                    validateTrigger: ['change', 'blur'],
                   
                  }
                ]"
                    ></a-textarea>
                    <!-- rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入特艺/特殊工艺'
                      }
                    ] -->
                  </a-form-item>
                  <a-form-item label="粘衬部位">

                    <div
                      v-for="(item, index) in fileds"
                      :key="index"
                      style="border: 1px solid #d9d9d9;padding:10px;margin-bottom:10px;    border-radius: 4px;"
                    >
                      <a-row :gutter="6">
                        <a-col :span="6">
                          编号
                        </a-col>
                        <a-col :span="6">
                          温度
                        </a-col>
                        <a-col :span="6">
                          时间
                        </a-col>
                        <a-col :span="6">
                          压力
                        </a-col>
                      </a-row>
                      <a-row :gutter="6">
                        <a-col :span="6">
                          <a-input
                            allow-clear
                            v-decorator="[
                  `craftBillInterlining[${index}][code]`,
                  {
                   initialValue: colorList[index].code
                  }
                ]"
                          />
                        </a-col>

                        <a-col :span="6">
                         <a-form-item>
                           <a-input
                            allow-clear
                            :maxLength="40"
                            v-decorator="[
                  `craftBillInterlining[${index}][temperature]`,
                  {
                   initialValue: colorList[index].temperature,
                   rules: [{
                        validator: (rule, value, callback) => {
                          let pattern =/[\u4E00-\u9FA5]/g
                          if (pattern.test(value)) {
                            callback('只能输入字符与数字！')
                          } else {
                            callback()         
                          }
                        }
                      }]
                  }]"
                          />
                         </a-form-item>
                        </a-col>
                        <a-col :span="6">
                         <a-form-item>
                           <a-input
                            allow-clear
                            v-decorator="[
                  `craftBillInterlining[${index}][time]`,
                  {
                   initialValue: colorList[index].time,
                  rules: [{
                        validator: (rule, value, callback) => {
                          let pattern =/[\u4E00-\u9FA5]/g
                          if (pattern.test(value)) {
                            callback('只能输入字符与数字！')
                          } else {
                            callback()         
                          }
                        }
                      }]
                  }]"
                          />
                         </a-form-item>
                        </a-col>
                        <a-col :span="6">
                         <a-form-item>
                           <a-input
                            allow-clear
                            v-decorator="[
                  `craftBillInterlining[${index}][pressure]`,
                  {
                   initialValue: colorList[index].pressure,
                  rules: [{
                        validator: (rule, value, callback) => {
                          let pattern =/[\u4E00-\u9FA5]/g
                          if (pattern.test(value)) {
                            callback('只能输入字符与数字！')
                          } else {
                            callback()         
                          }
                        }
                      }]
                  }]"
                          />
                         </a-form-item>
                        </a-col>
                      </a-row>
                      <a-row>
                        部位
                      </a-row>
                      <a-row>
                        <a-textarea
                          v-decorator="[
                  `craftBillInterlining[${index}][part]`,
                  {
                   initialValue: colorList[index].part
                  }
                ]"
                        >
                        </a-textarea>
                      </a-row>
                      <a-icon
                        class="dynamic-delete-button2 mt-10"
                        type="minus-circle-o"
                        @click="() => remove(index)"
                      />

                    </div>
                  </a-form-item>
                </a-form>
              </a-card>
            </div>
            <div v-show="current == 1">
              <a-table
                :columns="columns"
                :data-source="craftBillTemplate"
              >
                <template
                  slot="description"
                  slot-scope="text, record"
                >
                  <a-textarea
                    style="margin: -5px 0"
                    :value="text"
                    @change="e => handleChangeinput(e.target.value, record.id)"
                  >
                  </a-textarea>
                  <!-- <template v-if="!record.editable">{{ text }}</template>
                  <a-icon
                    type="edit"
                    class="editable-cell-icon"
                    style="margin-left:10px"
                    @click="edit(record.id)"
                  /> -->
                </template>

                <template
                  slot="action"
                  slot-scope="txt, record"
                >
                  <a-popconfirm
                    :title="`确定要删除该项吗?`"
                    @confirm="deleteRecord(record)"
                  >
                    <a class="mr-10">
                      <a-icon type="delete" />删除
                    </a>
                  </a-popconfirm>
                </template>

              </a-table>
            </div>
            <div v-show="current == 2">
              <a-table
                :columns="columns2"
                v-if="craftBillPart.length"
                :defaultExpandAllRows="true"
                :data-source="craftBillPart"
              >
                <template
                  slot="action"
                  slot-scope="txt, record,index"
                >
                  <a-popconfirm
                    :title="`确定要删除该项吗?`"
                    @confirm="deletePart(record,index)"
                  >
                    <a class="mr-10">
                      <a-icon type="delete" />删除
                    </a>
                  </a-popconfirm>
                </template>
                <a-table
                  slot="expandedRowRender"
                  slot-scope="record"
                  :columns="innerColumns"
                  :data-source="record.craftStep"
                  :pagination="false"
                >
                  <template
                    slot="imgurl"
                    slot-scope="txt, record"
                  >
                    <img
                      style="width:150px;height: 100px;object-fit: scale-down;"
                      :src="record.imgurl"
                      @click="prevImg(record.imgurl)"
                      :alt="record.imgurl"
                    >
                  </template>
                  <template
                    slot="description"
                    slot-scope="text, record"
                  >
                    <a-textarea
                      style="margin: -5px 0"
                      :value="text"
                      @change="e =>changeinputPart(e.target.value, record)"
                    >
                    </a-textarea>
                  </template>
                </a-table>
              </a-table>
            </div>
            <div v-show="current == 3">
              <a-table
                :columns="columns3"
                :data-source="craftBillSpec"
              >
                <template
                  slot="imgurl"
                  slot-scope="txt, record"
                >
                  <img
                    style="height: 100px;object-fit: scale-down;"
                    :src="record.imgurl"
                    @click="prevImg(record.imgurl)"
                    :alt="record.imgurl"
                  >
                </template>
                <template
                  slot="action"
                  slot-scope="txt, record"
                >
                  <a-popconfirm
                    :title="`确定要删除该项吗?`"
                    @confirm="deleteSea(record)"
                  >
                    <a class="mr-10">
                      <a-icon type="delete" />删除
                    </a>
                  </a-popconfirm>
                </template>

              </a-table>
            </div>
            <div v-show="current == 4">
               <a-table
                :columns="columns4"
                :data-source="brands"
              >
                <template
                  slot="brand"
                  slot-scope="txt, record"
                >
                  <span
                    v-for="item,index in record.brand"
                    :key="index"
                  >
                    <span
                      v-for="subitem,index in brandList"
                      :key="index"
                    >
                      <a-tag
                        color="blue"
                        v-if="item == subitem.code"
                      >{{subitem.name}}</a-tag>
                    </span>
                  </span>
                </template>
                <template
                  slot="xl"
                  slot-scope="txt, record"
                >
                  <span
                    v-for="item,index in record.xl"
                    :key="index"
                  >
                    <span
                      v-for="subitem,index in xlList"
                      :key="index"
                    >
                      <a-tag
                        color="cyan"
                        v-if="item == subitem.code"
                      >{{subitem.name}}</a-tag>
                    </span>
                  </span>
                </template>
                <template
                  slot="material"
                  slot-scope="txt, record"
                >
                  <span
                    v-for="item,index in record.material"
                    :key="index"
                  >
                    <span
                      v-for="subitem,index in materialList"
                      :key="index"
                    >
                      <a-tag
                        color="purple"
                        v-if="item == subitem.code"
                      >{{subitem.name}}</a-tag>
                    </span>
                  </span>
                </template>
                <template
                  slot="thick"
                  slot-scope="txt, record"
                >
                  <span
                    v-for="item,index in record.thick"
                    :key="index"
                  >
                    <span
                      v-for="subitem,index in thickList"
                      :key="index"
                    >
                      <a-tag
                        color="orange"
                        v-if="item == subitem.code"
                      >{{subitem.name}}</a-tag>
                    </span>
                  </span>
                </template>
                <template
                  slot="action"
                  slot-scope="txt, record,i"
                >
                  <a
                    class="mr-10"
                    @click="edit(record,i)"
                  >
                    <a-icon type="edit" />编辑
                  </a>
                  <a-popconfirm
                    :title="`确定要删除该项吗?`"
                    @confirm=" removeBrand(i)"
                  >
                    <a class="mr-10">
                      <a-icon type="delete" />删除
                    </a>
                  </a-popconfirm>
                </template>

              </a-table>
              <!-- <a-form :form="form1">
                <div
                  v-for="(item, index) in brands"
                  :key="index"
                  style=" display: flex;justify-content: center;"
                >
                  <div style="display: flex;justify-content: space-between;margin-bottom:10px">
                    <a-form-item style="margin-bottom:0px">
                      <a-select
                        allow-clear
                        :required="true"
                        show-search
                        style="width:200px"
                        placeholder="请选择品牌"
                        v-decorator="[ `craftBillRelation[${index}][brand]`, {initialValue: craftList[index].brand,
                                           rules: [{required: true,message: '请选择品牌'}]}]"
                      >
                        <a-select-option
                          :value="item.code"
                          v-for="(item,index) in brandList"
                          :key="index"
                        >
                          {{ item.name }}
                        </a-select-option>
                      </a-select>
                    </a-form-item>
                    <a-form-item style="margin-bottom:0px">
                      <a-select
                        allow-clear
                        :required="true"
                        show-search
                        style="margin-left:10px;width:200px"
                        placeholder="请选择小类"
                        v-decorator="[`craftBillRelation[${index}][xl]`, {initialValue: craftList[index].xl,
                                           rules: [{required: true,message: '请选择小类'}]}]"
                      >
                        <a-select-option
                          :value="item.code"
                          v-for="(item,index) in xlList"
                          :key="index"
                        >
                          {{ item.name }}
                        </a-select-option>
                      </a-select>
                    </a-form-item>

                    <a-icon
                      style="margin: 7px 0 0 3px;"
                      class="dynamic-delete-button mt-10"
                      type="minus-circle-o"
                      @click="() => removeBrand(index)"
                    />
                  </div>

                </div>

              </a-form> -->
            </div>
          </a-col>
        </a-row>
      </div>
      <div class="steps-action">
        <a-button
          type="primary"
          @click="reset"
        >返回</a-button>
        <div>
          <a-button
            v-if="current == 0"
            type="link"
            @click="add"
          >
            <a-icon type="plus" /> 添加粘衬部位
          </a-button>
          <a-button
            v-if="current == 1"
            type="link"
            @click="addList"
          >
            <a-icon type="plus" /> 添加工艺
          </a-button>

          <a-button
            v-if="current == 2"
            type="link"
            @click="addPart"
          >
            <a-icon type="plus" /> 添加部位
          </a-button>
          <a-button
            v-if="current == 3"
            type="link"
            @click="addSea"
          >
            <a-icon type="plus" /> 添加特艺
          </a-button>
          <a-button
            v-if="current == 4"
            type="link"
            @click="addBrand"
          >
            <a-icon type="plus" /> 添加关联属性
          </a-button>
          <a-button
            v-if="current > 0"
            style="margin-left: 8px"
            @click="prev"
          >
            上一步
          </a-button>
          <a-button
            v-if="current == 0 "
            type="primary"
            style="margin-left: 8px"
            @click="handleSubmit"
          >
            下一步
          </a-button>
          <a-button
            v-if="current == 1"
            type="primary"
            style="margin-left: 8px"
            @click="next2"
          >
            下一步
          </a-button>
          <a-button
            v-if="current == 2"
            type="primary"
            style="margin-left: 8px"
            @click="next3"
          >
            下一步
          </a-button>
          <a-button
            v-if="current == 3"
            type="primary"
            style="margin-left: 8px"
            @click="next3"
          >
            下一步
          </a-button>
          <!-- v-if="current == steps.length - 1" -->
          <a-button
            type="primary"
            style="margin-left: 8px"
            @click="final"
          >
            保存
          </a-button>
        </div>
      </div>
      <templateList
        v-if="showTemplate"
        @close="close"
      ></templateList>
      <partList
        v-if="showPart"
        :billList="billList"
        @closePart="closePart"
      ></partList>
      <bill
        v-if="showBill"
        :backList="backList"
        @closeBill="closeBill"
      ></bill>
      <seaList
        v-if="showSea"
        @closeSea="closeSea"
      ></seaList>
      <brandList
        v-if="showBrand"
        :brandNum="brandNum"
        :item="item"
        @closeBrand="closeBrand"
      ></brandList>
      
      <a-modal
        v-model="showBigImg"
        title="图片预览"
        @ok="showBigImg = false"
        :footer="null"
        width="60%"
        :mask="true"
      >
        <div class="previmg">
          <img :src="prevImageUrl" />
        </div>
      </a-modal>
    </div>

  </a-modal>

</template>

<script>
import { createList, updatelist, getDictChildList, getDetailList } from '@api/rd/index'
import { uploadUrl } from '@api/rd/index.js'
import templateList from './template.vue'
import partList from './part.vue'
import seaList from './sea.vue'
import bill from './bill.vue'
import brandList from './brand.vue'

const columns = [
  {
    title: '描述',
    dataIndex: 'description',
    scopedSlots: { customRender: 'description' }
  },
  {
    title: '操作',
    width: 220,
    scopedSlots: { customRender: 'action' }
  }
]
const innerColumns = [
  {
    title: '图片',
    scopedSlots: { customRender: 'imgurl' }
  },
  {
    title: '描述',
    width: 500,
    dataIndex: 'description',
    scopedSlots: { customRender: 'description' }
  }
]
const columns3 = [
  {
    title: '序号',
    dataIndex: 'seq'
  },
  {
    title: '特艺',
    dataIndex: 'specId'
  },
  {
    title: '销售色',
    dataIndex: 'styColorId'
  },
  {
    title: '跳码',
    dataIndex: 'jumpSize'
  },
  {
    title: '图片',
    scopedSlots: { customRender: 'imgurl' }
  },
  {
    title: '操作',
    width: 100,
    scopedSlots: { customRender: 'action' }
  }
]
const columns2 = [
  {
    title: '编号',
    width: 200,
    dataIndex: 'code'
  },
  {
    title: '工艺部位',
    width: 100,
    dataIndex: 'partName'
  },
  {
    title: '工艺做法',
    width: 100,
    dataIndex: 'operName'
  },
  {
    title: '操作',
    width: 100,
    scopedSlots: { customRender: 'action' }
  }
]
const columns4 = [
  {
    title: '品牌',
    scopedSlots: { customRender: 'brand' }
  },
  {
    title: '小类',
    scopedSlots: { customRender: 'xl' }
  },
  {
    title: '材质',
    scopedSlots: { customRender: 'material' }
  },
  {
    title: '厚薄',
    scopedSlots: { customRender: 'thick' }
  },
  {
    title: '操作',
    width: 160,
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  components: {
    templateList,
    partList,
    seaList,
    bill,
    brandList
  },

  props: {
    content: {
      type: Object,
      default: null
    }
  },

  data() {
    return {
      id: '',
      columns,
      columns2,
      columns3,
      columns4,
      brands: [],
      fileds: [],
      craftList: [],
      value: this.text,
      billNo: '',
      backList: [],
      showBill: false,
      statusTime: '',
      prevImageUrl: '',
      showBigImg: false,
      statusUser: '',
      innerColumns,
      uploadUrl,
      loading: false,
      showTemplate: false,
      showPart: false,
      idEdit: false,
      showBrand:false,
      craftBillTemplate: [],
      craftBillSpec: [],
      item:{},
      disabled: false,
      showSea: false,
      firstForm: {},
      nextForm: {},
      continue: true,
      nonError: true,
      colorList: [],
      gettime: '',
      billList: {},
      brandList: [],
      xlList: [],
      thickList:[],
      materialList:[],
      finalForm: {},
      craftBillPart: [],
      imageUrl: '',
      brandNum:'',
      form: this.$form.createForm(this),
      form1: this.$form.createForm(this),
      form2: this.$form.createForm(this),
      form3: this.$form.createForm(this),
      current: 0,
      editingKey: '',
      editKey: '',
      steps: ['录入工艺', '统一工艺', '部位信息', '特艺确认', '设置关联属性'],
      formItemLayout: {
        labelCol: {
          xl: { span: 5 }
        },
        wrapperCol: {
          xl: { span: 15 }
        }
      }
    }
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo || null
    }
  },
  created() {
    const { content } = this.$props
    this.getBrandList()
    this.getXlList()
    this.getMList()
    this.getTList()
    if (content) {
      this.formTile = '编辑'
      this.id = content.id
      this.$nextTick(() => {
        this.getDetail()
      })
      this.idEdit = true
    } else {
      this.formTile = '新增'
      // this.addBrand()
      this.add()
    }
    setInterval(this.getTime, 500)
  },
  methods: {
    getTime() {
      var _this = this
      let yy = new Date().getFullYear()
      var mm = new Date().getMonth() < 9 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1
      var dd = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate()
      let hh = new Date().getHours()
      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
      let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()
      _this.gettime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss
    },
    next() {
      this.current++
    },
    prev() {
      this.current--
    },
    prevImg(url) {
      this.prevImageUrl = url
      this.showBigImg = true
    },
    reset() {
      this.form.resetFields()
      this.$emit('close')
    },
    deleteRecord(record) {
      this.craftBillTemplate = this.craftBillTemplate.filter(item => item.id != record.id)
    },
    deletePart(record, Num) {
      if (record.id) {
        this.craftBillPart = this.craftBillPart.filter(item => item.id != record.id)
      } else {
        this.craftBillPart = this.craftBillPart.filter((item, index) => index != Num)
      }
    },
    deleteSea(record) {
      this.craftBillSpec = this.craftBillSpec.filter(item => item.id != record.id)
    },
    addList() {
      this.showTemplate = true
    },
    addPart() {
      this.showPart = true
    },
    addSea() {
      this.showSea = true
    },
    removeBrand(i) {
      // this.craftList = this.form1.getFieldValue('craftBillRelation')
      // this.brands.splice(index, 1)
      // this.craftList.splice(index, 1)
      // // 初始化initialValue
      // this.form1.resetFields(['craftBillRelation'])
      this.brands = this.brands.filter((item, index) => index != i)

    },
    addBrand() {
      this.item = ''
      this.showBrand = true
    },
    close(values) {
      this.showTemplate = false
      if (values) {
        this.craftBillTemplate = this.craftBillTemplate.concat(values)
        const res = new Map()
        const arr = this.craftBillTemplate
        this.craftBillTemplate = arr.filter(arr => !res.has(arr.id) && res.set(arr.id))
      }
    },
    closePart(values) {
      this.showPart = false
      if (values) {
        this.craftBillPart = this.craftBillPart.concat(values)
        const res = new Map()
        const arr = this.craftBillPart

        this.craftBillPart = arr.filter(arr => !res.has(arr.operId + arr.partId) && res.set(arr.operId + arr.partId))
      }
    },
    closeBill(values) {
      this.showBill = false
      if (values == 1) {
        this.billNo = ''
        this.disabled = false
      } else {
        this.billList = values[0]
      }
    },
    closeSea(values) {
      this.showSea = false
      if (values) {
        this.craftBillSpec.push(values)
      }
    },
    closeBrand(values,i) {
      this.showBrand = false
      if (values && (i || i == 0)) {
        this.$set(this.brands, i, values)
      }else if(values && !i && i !=0){
        this.brands.push(values)
      }
    },
    handleChangeinput(value, key) {
      const newData = [...this.craftBillTemplate]
      const target = newData.find(item => key === item.id)
      if (target) {
        target.description = value
        this.craftBillTemplate = newData
      }
    },
    edit(record,index) {
      this.item = record
      this.brandNum = index
      this.showBrand = true

    },
    changeinputPart(value, key) {
      const newData = [...this.craftBillPart]
      newData.map(x => {
        x.craftStep.map(y => {
          if (y.imgurl == key.imgurl) {
            y.description = value
          }
        })
      })
      this.craftBillPart = newData
    },
    // editPart(values) {
    //   if (!values.id) {
    //     const newData = [...this.craftBillPart]
    //     newData.map(x => {
    //       x.craftStep.map(y => {
    //         if (y.imgurl == values.imgurl) {
    //           y.editable = true
    //         }
    //       })
    //     })
    //     this.craftBillPart = newData
    //   }
    //   console.log(this.craftBillPart)
    // },
    // finishInput(id) {
    //   console.log(id + 11)
    //   const newData = [...this.craftBillTemplate]
    //   const target = newData.find(item => id === item.id)
    //   this.editingKey = false
    //   if (target) {
    //     target.editable = false
    //     this.craftBillTemplate = newData
    //   }
    // },
    handleSubmit(e) {
      e.preventDefault()

      this.form.validateFields((err, values) => {
        if (!err) {
          this.firstForm = values
          this.current += 1
          // this.submit()
        }
      })

      // this.current += 1
    },
    remove(index) {
      this.colorList = this.form.getFieldValue('craftBillInterlining')
      this.fileds.splice(index, 1)
      this.colorList.splice(index, 1)
      // 初始化initialValue
      this.form.resetFields(['craftBillInterlining'])
    },
    add() {
      this.fileds = this.colorList
      const obj = { code: '', pressure: '', temperature: '', time: '', part: '' }
      this.fileds.push(obj)
      this.colorList = this.fileds
    },
    next2(e) {
      e.preventDefault()
      // if (!this.craftBillTemplate.length) {
      //   this.$message.error('请添加工艺！')
      // } else {
      this.current += 1
      //    this.submit()
      // }
      // this.current += 1
    },
    next3(e) {
      e.preventDefault()
      // if (!this.craftBillPart.length) {
      //   this.$message.error('请添加部位！')
      // } else {
      this.current += 1
      //  this.submit()
      // }
      // this.current += 1
    },
    final(e) {
      e.preventDefault()
      // if (!this.craftBillSpec.length) {
      //   this.$message.error('请添加特艺！')
      // } else {
      this.submit()
      // }
    },
    async getDetail() {
      this.craftBillPart = []
      this.craftBillTemplate = []
      const params = {
        id: this.id
      }
      try {
        const res = await getDetailList('bill', params)
        if (res.code == 200) {
          const detail = res.data
          this.statusUser = res.data.statusUser
          this.statusTime = res.data.statusTime
          this.form.setFieldsValue({
            beof: detail.beof,
            fabricDesc: detail.fabricDesc,
            zyNum: detail.zyNum,
            cutting: detail.cutting,
            process: detail.process,
            tempName:detail.tempName,
            // interlining: detail.interlining,
            tyReq: detail.tyReq,
            tyProcess: detail.tyProcess,
            commonReq: detail.commonReq
          })
          this.craftBillTemplate = detail.craftBillTemplateVos
          this.craftBillSpec = detail.craftBillSpecVos
          if (detail.craftBillInterliningVos.length) {
            this.fileds = detail.craftBillInterliningVos
            this.colorList = detail.craftBillInterliningVos
          } else {
            this.add()
          }
          if (detail.craftBillRelationVos.length) {
            this.craftList = detail.craftBillRelationVos
            this.brands = detail.craftBillRelationVos
          } 
          // else {
          //   this.addBrand()
          // }
          if(detail.craftBillRelationVos.length){
            this.brands = detail.craftBillRelationVos
          }
          const newarr = []
          if (detail.craftBillPartVos.length) {
            detail.craftBillPartVos.map(item => {
              const arr = []
              const craftStep = {
                description: item.description,
                imgurl: item.imgurl,
                step: item.subSeq
              }
              arr.push(craftStep)
              const obj = {
                partId: item.partId,
                partName: item.partName,
                operId: item.operId,
                operName: item.operName,
                craftStep: arr,
                seq: item.seq
              }
              newarr.push(obj)
            })
            console.log(newarr)
            const result = newarr.reduce((acc, item) => {
              const itemInAcc = acc.find(itemAcc => itemAcc.seq === item.seq)
              if (!itemInAcc) {
                acc.push({ ...item, craftStep: item.craftStep })
              } else {
                itemInAcc.craftStep.push(item.craftStep[0])
              }
              return acc
            }, [])
            console.log(result)
            this.craftBillPart = result
          }
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取工艺单详情失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取工艺单详情失败！')
      }
    },
    async getBrandList() {
      const params = {
        name: 'BRAND'
      }
      try {
        const res = await getDictChildList('dict', params)
        if (res.code == 200) {
          this.brandList = res.data
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('获取品牌列表失败！')
      }
    },

    async getXlList() {
      const params = {
        name: 'XL'
      }
      try {
        const res = await getDictChildList('dict', params)
        if (res.code == 200) {
          this.xlList = res.data
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('获取小类列表失败！')
      }
    },
    async getMList() {
      const params = {
        name: 'GY_MATERIAL'
      }
      try {
        const res = await getDictChildList('dict', params)
        if (res.code == 200) {
          this.materialList = res.data
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('获取小类列表失败！')
      }
    },
    async getTList() {
      const params = {
        name: 'GY_THICK'
      }
      try {
        const res = await getDictChildList('dict', params)
        if (res.code == 200) {
          this.thickList = res.data
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error('获取小类列表失败！')
      }
    },
    async submit() {
      this.form.validateFields((err, values) => {
          if (!err) {
            this.nonError = true
            this.firstForm = this.form.getFieldsValue()
          } else {
            this.nonError = false
          }
        })
      if (this.firstForm.craftBillInterlining[0].code) {
        this.firstForm.craftBillInterlining.map((item, i) => {
          item.seq = i
        })
      } else {
        this.firstForm.craftBillInterlining = []
      }
      var params = this.firstForm
      params.isTemp = 'Y'
      params.craftBillRelationGroup = this.brands
      params.craftBillSchool = []
      const craftBillPart = []
      this.craftBillPart.map((item, index) => {
        if (item.craftStep) {
          item.craftStep.map(subitem => {
            const obj = {
              partId: item.partId,
              operId: item.operId,
              seq: index,
              description: subitem.description,
              imgurl: subitem.imgurl,
              subSeq: subitem.step
            }
            craftBillPart.push(obj)
          })
        } else {
          craftBillPart.push(item)
        }
      })
      params.craftBillPart = craftBillPart
      params.craftBillSpec = this.craftBillSpec
      this.craftBillTemplate.map((item, index) => {
        if (!item.seq) {
          item.seq = index
        }
        if (item.partName && !item.description) {
          this.$message.warning('请填写描述！')
          this.continue = false
        } else {
          this.continue = true
        }
      })
      if (this.continue) {
        params.craftBillTemplate = this.craftBillTemplate
        const { realname } = this.userInfo
        params.operator = realname
        params.billNo = this.billNo
        console.log(params)
        if (this.id) {
          params.id = this.id
        }
        try {
          const res = this.idEdit ? await updatelist('bill', params) : await createList('bill', params)
          if (res.code == 200) {
            this.$message.success(this.idEdit ? '修改工艺单成功！' : '新建工艺单成功！')
            this.idEdit = true
            // this.reset()
          } else {
            this.$message.warning(res.msg)
          }
        } catch (error) {
          this.$message.warning('操作失败！')
        } finally {
          this.loading = false
        }
      }
    }
  }
}
</script>

<style scoped lang="less">
.info-action {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  // margin-bottom: 20px;
}
.ml-20 {
  margin-left: 20px;
}
.steps-content {
  margin-top: 16px;
  min-height: 200px;
  text-align: center;
  padding-top: 50px;
}
.steps-action {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
}
.ant-upload-picture-card-wrapper {
  width: 20%;
}
.ant-upload-picture-card-wrapper[data-v-7206a2ce] {
  width: 100%;
}
.dynamic-delete-button {
  cursor: pointer;
  font-size: 24px;
  color: #999;
  margin: 50px 5px;
  transition: all 0.3s;
}
.dynamic-delete-button:hover {
  color: #777;
}
.dynamic-delete-button[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

.dynamic-delete-button2 {
  cursor: pointer;
  font-size: 24px;
  color: #999;
  /* margin: 50px 5px; */
  top: -92px;
  left: 380px;
  position: relative;
}
.dynamic-delete-button2:hover {
  color: #777;
}
.dynamic-delete-button2[disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}
.ant-upload-picture-card-wrapper[data-v-f7c29e7e] {
  width: 95%;
}
.steps-content[data-v-f7c29e7e] {
  padding-top: 20px;
}
.previmg {
  display: flex !important;
  justify-content: center;
  align-items: center;
}
.previmg img {
  width: 500px;
}
</style>
